﻿<%@ Page Title="" Language="C#" MasterPageFile="~/LayoutDetails.master" AutoEventWireup="true"
    CodeBehind="ProductPage.aspx.cs" Inherits="phudieuhungthinh.Pages.ProductPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="/Styles/product.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.cycle2.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.cycle2.carousel.min.js" type="text/javascript"></script>
    <script src="/Scripts/imgLiquid-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.fn.cycle.defaults.autoSelector = '.slideshow'; $(document).ready(function () {
            $(".slideshow .item .img").imgLiquid({ fill: false });
        });
    </script>
    <style type="text/css">
        .slideshow
        {
            width: 702px !important;
            height: 210px;
            overflow: hidden;
        }
        .cycle-slideshow
        {
            width: 50%;
        }
        .cycle-slideshow img
        {
            width: 100%;
            height: auto;
        }
        .slideshow div.item
        {
            padding: 5px;
            margin: 2px;
            border: 1px solid #fcca5b;
        }
        .slideshow div.item .img
        {
            width: 160px;
            height: 160px;
            max-height: 200px;
        }
        .slideshow div.item a
        {
            position: absolute;
            display: block;
            width: 160px;
            height: 200px;
        }
        .center
        {
            text-align: center;
            margin: 10px 0;
            overflow: hidden;
        }
        .center .nav
        {
            display: inline-block;
            width: 34px;
            height: 25px;
            border: 0;
            background-color: transparent;
            background-image: url(/Images/jcarousellite_nav.png);
            background-repeat: no-repeat;
        }
        .center #next.nav
        {
            margin-left: 10px;
            background-position: -34px 0;
        }
        .center #prev.nav:hover
        {
            background-position: 0 -25px;
        }
        .center #next.nav:hover
        {
            background-position: -34px -25px;
        }
        #pager
        {
            text-align: center;
        }
        #pager span
        {
            color: #fcca5b;
            cursor: pointer;
            font-size: 34pt;
        }
        #pager span.cycle-pager-active
        {
            color: #fff;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Panel ID="pProduct" runat="server" CssClass="product-details" />
    <asp:Panel ID="pSlide" runat="server" />
</asp:Content>
